<template>
	<view class="u-p-28">
		<view class="bgw box-radius u-p-l-28 u-p-r-28">
			<u-form :model="formData" ref="formRef" :label-width="150" :errorType="['toast']">
				<u-form-item label="收货人" prop="name">
					<u-input v-model.trim="formData.name" placeholder="请输入姓名" input-align="right" />
				</u-form-item>
				<u-form-item label="联系电话" prop="phone">
					<u-input v-model.trim="formData.phone" placeholder="请输入您的手机号" input-align="right" type="number" />
				</u-form-item>
				<u-form-item label="所在地区" prop="cityData">
					<g-input-tree :level="3" :range="cityData" v-model="formData.cityData"></g-input-tree>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" :border-bottom="false" label-position="top" input-align="left">
					<u-input v-model.trim="formData.address" placeholder="请填写详细地址" type="textarea"
						:auto-height="true" />
				</u-form-item>
			</u-form>
		</view>
		<u-gap height="20"></u-gap>
		<view class="bgw box-radius u-p-28">
			<u-checkbox-group>
				<u-checkbox v-model="agreeFlag" name="agree" shape="circle" active-color="#117B12">
					设为默认收货地址
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
	<u-gap height="140"></u-gap>
	<view class="fixed-bottom u-p-l-48 u-p-r-48 u-p-t-20 u-p-b-20 bgw">
		<u-button type="primary" :loading="loading" shape="circle" @click="submit">保存地址</u-button>
	</view>
</template>


<script setup>
	import cityData from '@/common/js/cityData.js'; //需要引入store
	import store from '@/store/index.js'; //需要引入store

	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js'; //需要引入store
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		toastNavBack
	} = proxy.$util;
	const props = defineProps({
		sid: {
			type: [String, Number],
			default: '',
		}
	})
	const agreeFlag = ref(false)
	const formRef = ref()
	const formRules = {
		address: [{
			required: true,
			message: '请输入详细地址',
			trigger: 'blur,change'
		}],
		name: [{
			required: true,
			message: '请输入收货人',
			trigger: 'blur,change'
		}],
		phone: [{
			required: true,
			message: '请输入联系电话',
			trigger: 'blur,change'
		}],
		// city: [{
		// 	required: true,
		// 	message: '请选择所在地区',
		// 	trigger: 'blur,change'
		// }]
	};
	const formData = reactive({
		address: '',
		name: '',
		phone: '',
		cityData: ''
	})
	let adcodeObj = {};
	cityData.forEach(p => {
		p.children.forEach(c => {
			c.children.forEach(d => {
				adcodeObj[d.value] = {
					province: {
						id: p.value,
						name: p.label
					},
					city: {
						id: c.value,
						name: c.label
					},
					district: {
						id: d.value,
						name: d.label
					}
				}
			})
		})
	})


	const loading = ref(false);
	const submit = (e) => {
		// uni.$emit('address_update')
		// toastNavBack('成功')
		// return;		
		if (!formData.cityData) {
			uni.$u.toast('请选择所在地区');
			return false;
		}
		let [provinceCode, cityCode, districtCode] = formData.cityData;
		let _data = JSON.parse(JSON.stringify(formData));
		let cityObj = adcodeObj[districtCode];
		_data.city = cityObj.city.name;
		_data.cityCode = cityObj.city.id;
		_data.district = cityObj.district.name;
		_data.districtCode = cityObj.district.id;
		_data.province = cityObj.province.name;
		_data.provinceCode = cityObj.province.id;
		_data.defaulted = agreeFlag.value ? 0 : 1;
		delete _data.cityData
		formRef.value.validate(async valid => {
			if (valid) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				loading.value = true;
				try{
					let res;
					if(props.sid){
						res = await proxy.$u.api.editAddress(props.sid,_data);
					}else{
						res = await proxy.$u.api.addAddress(_data);
					}
					let {
						data,
						code,
						msg
					} = res;
					if (code == 200) {
						uni.$emit('address_update')
						toastNavBack(res.msg || '成功')
					} else {
						uni.$u.toast(msg || '错误');
					}
					loading.value = false
				}catch(err){
					loading.value = false
					uni.$u.toast('错误');
				}
			} else {
				console.log('验证失败');
			}
		});
	}
	const getData = () => {
		if (!props.sid) {
			return;
		}
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getAddressDetail(props.sid).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			for (let key in formData) {
				formData[key] = data[key]
			}
			let {
				provinceCode,
				cityCode,
				districtCode
			} = data;
			formData.cityData = [provinceCode, cityCode, districtCode];
			agreeFlag.value = data.defaulted === 0

		}).catch(res => {

		})
	}
	onReady(() => {
		// console.log(formRef);
		formRef.value.setRules(formRules);
	})
	onLoad((d) => {
		getData();
	})
	onShow(() => {


	})
</script>

<style lang="scss" scoped>
	.fixed-bottom {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 28rpx 0rpx rgba(202, 206, 208, 0.3);
	}
</style>